<template>
  <div>
    <scroll-view
      class="scroll-wrap no-scroll-bar"
      style="height:calc(100% - 0px)"
      scroll-y
      @scrolltolower="handleLoadMore"
    >
      <div class="list" v-for="(item,index) in list" :key="index">
        <div class="top">
          <div class="left">
            <img :src="item.avatar" mode="aspectFill" />
            <div>
              <span>商品名：{{item.goodsName}}</span>
              <span>评价内容：{{item.content}}</span>
              <span>收货人：{{item.username}}</span>
              <i-rate
                :value="item.goodsAssess"
                :disabled="true"
                class="rateClasee"
              />
            </div>
          </div>
          <div class="right">
            <span class="btn" @click="replyClick(item.assessGoodsId)">回复</span>
            <!-- <span>{{item.createDate.slice(0, 10)}}</span> -->
            <span @click="listInfoClick(item)">查看详情</span>
            <span>{{item.createDate}}</span>
          </div>
        </div>
        <!-- <div class="bottom">
          <p>{{item.content}}</p>
          <div>
            <img :src="item.img1" mode="aspectFill">
            <img :src="item.img2" mode="aspectFill">
            <img :src="item.img3" mode="aspectFill">
          </div>
        </div>-->
      </div>
      <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
    </scroll-view>
    <div class="replyBox" v-if="replyShow">
      <div class="zz" @click="zzClick"></div>
      <div class="reply">
        <textarea
          v-model="replyTextarea"
          class="input-area"
          placeholder="请输入评论内容"
          placeholder-class="placeholder-part"
        ></textarea>
        <button
          class="replyBtn"
          @click="confirmReplyClick"
          size="small"
          shape="circle"
          type="primary"
        >发表</button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ASSESS_FIND_PAGE,
  ASSESS_REPLY_ASSESS,
  FIND_SHOP_GOODS_INFO
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      list: [],
      currentPage: 1,
      alreadyLastPage: false,
      replyTextarea: '',
      replyShow: false,
      assessGoodsId: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  onReady () {
    this._assessFindPage()
  },
  onShow () {
    this.init()
  },
  methods: {
    zzClick () {
      this.replyShow = false
      this.assessGoodsId = ''
    },
    replyClick (assessGoodsId) {
      this.assessGoodsId = assessGoodsId
      this.replyShow = true
    },
    confirmReplyClick () {
      if (!this.replyTextarea) {
        this.$toast('评论内容不能为空')
        return false
      }
      this._assessReplyAssess()
    },
    _assessReplyAssess () {
      const vm = this
      ASSESS_REPLY_ASSESS(vm.replyTextarea, vm.assessGoodsId)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('回复成功', '').then(() => {
              vm.init()
              vm._assessFindPage()
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._getShopOrderList()
      }
    },
    _assessFindPage () {
      const vm = this
      let goodsNo = vm.$root.$mp.query.goodsNo

      ASSESS_FIND_PAGE(goodsNo, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    printList (list, isFirst, isLast) {
      const vm = this
      list.forEach(_ => {
        FIND_SHOP_GOODS_INFO(_.goodsNo)
          .then(r => {
            if (r.data.code === '0') {
              _.goodsName = r.data.data.goodsName
              console.log(_.goodsName)
            } else {
              vm.$toast(r.data.message)
            }
          })
          .catch(e => {
            console.error(e)
          })
      })

      if (isFirst) {
        this.list = list
        if (isLast || !list.length) {
          // only one page
          this.alreadyLastPage = true
        } else {
          // has next page
          this.alreadyLastPage = false
          this.currentPage += 1
        }
      } else if (isLast) {
        // more than one page and this is the last page
        this.list.push(...list)
        this.alreadyLastPage = true
      } else {
        // middle page
        this.list.push(...list)
        this.alreadyLastPage = false
        this.currentPage += 1
      }
    },
    listInfoClick (item) {
      this.$cookie.set('reply-info', item)
      let val = JSON.stringify(item)
      // let goodsNo = this.$root.$mp.query.goodsNo
      this.$router.push('/pages/shop-management/evaluate-info/main?val=' + val)
    },
    init () {
      this.list = []
      this.currentPage = 1
      this.alreadyLastPage = false
      this.replyShow = false
      this.assessGoodsId = ''
      this.replyTextarea = ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.list {
  width: 95%;
  margin: 30px auto;
  .top {
    height: 70px;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50px;
      }
      div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 14px;
        margin-left: 10px;
        .rateClasee {
          line-height: 13px;
        }
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
      .btn {
        width: 50px;
        color: #fff;
        background: $blue;
        text-align: center;
        border-radius: 3px;
        padding: 3px 0;
      }
    }
  }
  .bottom {
    margin: 20px 0 0 0;
    p {
      font-size: 14px;
      color: #666;
      margin-bottom: 20px;
    }
    div {
      display: flex;
      img {
        width: 80px;
        height: 80px;
        margin-right: 25px;
      }
    }
  }
}
.end-tip {
  margin: 0;
  padding: 15px;
  text-align: center;
  color: #a9a9a9;
  font-size: 15px;
}
.replyBox {
  .zz {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 0.3;
  }
  .reply {
    width: 320px;
    height: 220px;
    border: 2px solid #eee;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    overflow: auto;
    .input-area {
      width: 95%;
      margin: 10px auto 0;
      font-size: 14px;
    }
    .replyBtn {
      text-align: center;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      white-space: nowrap;
      user-select: none;
      font-size: 14px;
      border-radius: 2px;
      border: 0 !important;
      position: relative;
      text-decoration: none;
      height: 44px;
      line-height: 44px;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
      color: #fff !important;
      margin: 10px;
      background: #508ff9;
      border-radius: 5px;
    }
  }
}
</style>
